import React, { Component, useState ,useEffect} from 'react'
import {
  createViewState,
} from '@jbrowse/react-linear-genome-view'
import Plugin from '@jbrowse/core/Plugin'
import assembly from './assembly'
import tracks from './tracks'
import JBItem from './Jitem';
import { Button,  Select, Space  } from 'antd';
import { useLocation } from 'react-router-dom';
import configuration from './configuration'
import plugins from './plugins'



export default class Heatmap extends Component {  
    constructor(props){
        super(props)
        this.state = {
            state: [createViewState({
                assembly,
                tracks,
                configuration,
            })],
        }
        console.log(tracks)
    }

    add = () => {
        this.setState({
            state: [...this.state.state,createViewState({
                assembly,
                tracks,
                configuration,  
            })],
        })
    }
    remove = (index) => {
        const list = [...this.state.state]
        list.splice(index,1)
        if (list.length === 0) {
          alert('已经是最后一个组件了！！！')
          return
        }
        this.setState({
            state: list
        })
    }
    render() {
        return (
            <div>
                <Space>
                    <Button onClick={this.add}>Add</Button>
                </Space>
                {
                    this.state.state.map((item,index) => {
                        return (
                            < div key={index}>
                            <JBItem content={item} key={index}/>
                            <button onClick={() => this.remove(index)}>remove</button>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}